<template>
    <div>
        <MyTitle title="公告新增"></MyTitle>
        <el-row class="mt10">
            <el-col :span="8">
                <el-form ref="formRef" :model="model" status-icon :rules="rules" label-width="120px" class="myform"
                    label-position="top">
                    <el-form-item label="公告标题" prop="title">
                        <el-input clearable v-model="model.title" type="text" placeholder="请输入公告标题"
                            autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="公告分类" prop="type">
                        <el-select v-model="model.type" size="middle" style="width:100%;" placeholder="请选择公告分类">
                            <el-option v-for="item in AnnoTypes" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="公告内容" prop="content">
                        <el-input rows="10" clearable v-model="model.content" type="textarea" placeholder="请输入公告内容"
                            autocomplete="off" />
                    </el-form-item>

                    <el-form-item label="公告描述" prop="desc">

                        <div class="desc-box">
                            <el-button class="desc-btn" type="info" @click="addDescImg">点击发布公告相关图片<el-icon>
                                    <Plus />
                                </el-icon> (只能一张)</el-button>
                            <input type="file" ref="fileRef" class="file" @change="todoStartUpload" />
                            <el-image class="desc-img" v-if="model.desc"
                                :src="model.desc.replace(/public/, baseURL)"></el-image>
                        </div>

                    </el-form-item>

                    <el-form-item class="lastitem">
                        <el-button type="success" block class="btnblock" @click="submitForm(formRef)">添加</el-button>
                        <el-button type="danger" block class="btnblock" @click="resetForm(formRef)">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { AnnoTypes } from '../../utils';
import { useFormHook } from '../../hooks/useFormHook';
import { Plus } from '@element-plus/icons-vue'
import { Http } from '../../api/api';
import { baseURL } from '../../api/request';
import { ShowError } from '../../utils/message';
import { useStore } from '../../store';
import { useRouter } from 'vue-router';

const router = useRouter()
const store = useStore()
const fileRef = ref<any>()
const formRef = ref<any>()
const rules = reactive<any>({
    title: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    type: [
        { required: true, message: '请选择', trigger: 'blur' },
    ],
    content: [
        { required: true, message: '请输入', trigger: 'blur' },
    ]
})
const model = ref<any>({
    desc: ""
})

const submitForm = (formEl: any) => {
    if (!formEl) return;
    formEl.validate(async (valid: boolean) => {
        if (valid) {
            model.value.author = store.userInfo;
            let res = await Http.annoadd(model.value) as unknown as any;
            if (res.code == 200) {
                router.push('/anno/list')
            }
        } else {
            ShowError('请输入有效的公告数据')
        }
    })
}

const { resetForm } = useFormHook()

const addDescImg = () => {
    fileRef.value.click()
}

const todoStartUpload = async () => {
    const file = fileRef.value.files[0]
    console.log(file)

    const data = new FormData()
    data.append('file', file)

    let res = await Http.uploadfile(data) as unknown as any;
    if (res.code == 200) {
        model.value.desc = res.path;
    }
}
</script>


<style lang="scss" scoped>
.file {
    display: none;
}

.desc-box {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.desc-btn {
    width: 240px;
}

.desc-img {
    width: 100%;
    display: block !important;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin: 20px 0;
    height: 300px;
}
</style>